<template>
  <div>
    <el-card class="box-card">
      <el-table v-loading="loading" :data="itemList">
        <el-table-column label="项目名称" align="center" prop="itemName">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sport_item" :value="scope.row.itemName"/>
          </template>
        </el-table-column>
        <el-table-column label="项目类型" align="center" prop="itemType">
          <template slot-scope="scope">
            <dict-tag ty :options="dict.type.item_type" :value="scope.row.itemType"/>
          </template>
        </el-table-column>
        <el-table-column label="报名人数要求" align="center" prop="itemPeoNum"/>
        <el-table-column label="项目比赛地点" align="center" prop="itemAddress"/>
        <el-table-column label="项目比赛性别要求" align="center" prop="itemSex">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.itemSex"/>
          </template>
        </el-table-column>
        <el-table-column label="项目比赛时间" align="center" prop="itemDate" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.itemDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报名开始时间" align="center" prop="itemStardate" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.itemStardate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报名结束时间" align="center" prop="itemEnddate" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.itemEnddate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目负责人姓名" align="center" prop="itemJudgementname"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleApply(scope.row)"
            >我要报名
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div slot="header" class="clearfix">
        <el-button
          style="left: 48%; top: 15px; position:absolute"
          type="primary"
          plain
          size="medium"
          @click="getList"
        >我的报名
        </el-button>
      </div>
    </el-card>

    <!--比赛报名项目弹窗-->
    <el-dialog title="报名" :visible.sync="open" width="1200px" append-to-body>
      <el-table :data="sportApplyUserList">
        <el-table-column label="用户登陆名" align="center" prop="userName"/>
        <el-table-column label="用户姓名" align="center" prop="userNickname"/>
        <el-table-column label="用户电话" align="center" prop="userPhone"/>
        <el-table-column label="学院" align="center" prop="params.dept.deptName"/>
        <el-table-column label="比赛项目名称" align="center" prop="itemName"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >取消报名
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--团体赛报名项目弹窗-->
    <el-dialog title="团体赛报名" :visible.sync="open1" width="800px" append-to-body>
      <p>注：输入团体赛人员名单；</p>
      <p>校级比赛时选择所在学院，院级比赛时选择所在班级</p>
      <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
        <el-form-item label="参赛人员" prop="userNickname">
          <el-input v-model="formData.userNickname" type="textarea" placeholder="队长：    队员："
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="userPhone">
          <el-input v-model="formData.userPhone" placeholder="请输入队长电话" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="选择学院/班级" prop="userDept">
          <treeselect v-model="formData.userDept" :options="deptOptions" :show-count="true" placeholder="请选择学院/班级"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addSportApplyUser, delSportApplyUser, listSportApplyUser} from "@/api/system/sportApplyUser";
import {getItem, listItem} from "@/api/system/item";
import {getUserProfile} from "@/api/system/user";
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: {Treeselect},
  dicts: ['sys_user_sex', 'sport_item', 'item_type'],
  name: "apply",
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      // 团体赛报名表单
      formData: {},
      // 团体赛报名弹窗
      open1: false,
      // 报名弹窗
      open: false,
      // 比赛列表
      itemList: [],
      // 用户信息
      user: [],
      // 遮罩层
      loading: false,
      // 当前用户比赛数据
      sportApplyUserList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        userNickname: null,
        userPhone: null,
        userDept: null,
        itemId: null,
        itemName: null,
        applyTime: null,
        score: null
      },
    }
  },
  created() {
    this.getUserList();
    this.getTreeselect();
    this.getItemList();
  },
  methods: {
    // 获取当前用户信息
    getUserList() {
      this.loading = true;
      getUserProfile().then(response => {
        this.user = response.data;
        this.loading = false;
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },

    /** 查询当前用户报名的项目 */
    getList() {
      this.open = true;
      let queryParams = this.queryParams;
      queryParams.userName = this.user.userName;
      listSportApplyUser(queryParams).then(response => {
        this.sportApplyUserList = response.rows;
        this.total = response.total;
      });

    },

    /** 团体赛报名 */
    handleConfirm() {
      let user = {}
      user = this.user;
      let formData = {
        userName: user.userName,
        userNickname: this.formData.userNickname,
        userPhone: this.formData.userPhone,
        userDept: this.formData.userDept,
        itemId: this.formData.id,
        itemName: this.formData.itemName,
        itemType: this.formData.itemType
      }
      addSportApplyUser(formData).then(response => {
        this.$modal.msgSuccess("报名成功")
        this.getList();
      })
    },

    /** 比赛报名 */
    handleApply(row) {
      if (row.itemSex != this.user.sex && row.itemSex != 2) {
        this.$modal.msgError("请检查比赛性别要求！")
      } else {
        if (row.itemType === '团体赛') {
          this.open1 = true;
          getItem(row.id).then(response => {
            this.formData = response.data
          })
          this.getTreeselect();
        } else {
          let user = {};
          let form = {};
          user = this.user;
          form = {
            userName: user.userName,
            userNickname: user.nickName,
            userPhone: user.phonenumber,
            userDept: user.dept.parentId,
            itemId: row.id,
            itemName: row.itemName,
            itemType: row.itemType,
          }
          addSportApplyUser(form).then(response => {
            this.$modal.msgSuccess("报名成功!");
            this.getList();
            this.open = false;
          });
        }
      }
    },

    /** 查询比赛项目列表 */
    getItemList() {
      this.loading = true;
      let queryParams = {
        pageNum: 1,
        pageSize: 100,
      }
      listItem(queryParams).then(response => {
        this.itemList = response.rows;
        this.loading = false;
      });
    },

    /** 取消报名 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认取消比赛报名').then(function () {
        return delSportApplyUser(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
  }
};
</script>

<style scoped>
/* 报名卡片样式开始*/
.clearfix {
  height: 50px;
}

.box-card {
  height: 88vh;
}

/*报名卡片样式结束*/
</style>
